<!doctype html>
<html lang='en' ng-app='ShoppingModule'>
  <head>
    <title>Shopping Cart</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <link href="bootstrap.css" rel="stylesheet">
  </head>

  <body ng-controller="ShoppingController">
    <h1>Shop!</h1>
    <table>
      <tr ng-repeat="item in items">
        <td>{{item.title}}</td>
        <td>{{item.description}}</td>
        <td>{{item.price | currency}}</td>
      </tr>
    </table>
    <script>
      function ShoppingController($scope, Items) {
        $scope.items = Items.query();
      }

      var shoppingModule = angular.module('ShoppingModule', []);

      // Set up the service factory to create our Items interface to the
      // server-side database
      shoppingModule.factory('Items', function() {
        var items = {};
        items.query = function() {
          // In real apps, we'd pull this data from the server...
          return [
            {title: 'Paint pots', description: 'Pots full of paint', price: 3.95},
            {title: 'Polka dots', description: 'Dots with polka', price: 2.95},
            {title: 'Pebbles', description: 'Just little rocks', price: 6.95}
          ];
        };
        return items;
      });
    </script>
  </body>
</html>
